<template>
    <div class="pane">
        <div class="dropContainer">
            <template  v-for="(value,key) in 9">
                <div class="dropBox" :key="key">
                </div>
                <div class="dragItem" :key="`item-${key}`" :id="`item-${key}`" :data-key = "RandomNumbers[key].key" draggable="true">
                    {{RandomNumbers[key].key}}
                </div>
            </template>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Pane extends Vue {
  get RandomNumbers () {
    const numbers: any[] = []
    for (let i = 1; i <= 9; i++) {
      numbers[i - 1] = {
        key: i
      }
    }
    numbers.forEach((value, index) => {
      let r = Math.ceil(Math.random() * 10)
      while (r > 8) {
        r = Math.ceil(Math.random() * 10)
      }
      numbers[index] = numbers[r]
      numbers[r] = value
    })
    return numbers
  }

  verify (resolve?: any, reject?: any) {
    const dropBoxs = document.querySelectorAll('.dropBox')

    for (let index = 0; index < 9; index++) {
      const dragItem = dropBoxs[index].childNodes[0] as any
      if (!dragItem || dragItem.dataset.key !== (index + 1).toString()) return reject()
    }
    return resolve()
  }

  mounted () {
    const dragItems = document.querySelectorAll('.dragItem')
    dragItems.forEach((dragItem) => {
      dragItem.addEventListener('dragstart', (ev: any) => {
        ev.dataTransfer.setData('text/plain', ev.target.id)
        ev.target.style.opacity = '.3'
      })
      dragItem.addEventListener('dragend', (ev: any) => {
        ev.target.style.opacity = ''
      })
    })

    const dropBoxs = document.querySelectorAll('.dropBox')
    dropBoxs.forEach((dropBox, index) => {
      dropBox.addEventListener('dragenter', (ev) => {
        ev.preventDefault()
        return false
      })
      dropBox.addEventListener('dragover', (ev) => {
        ev.preventDefault()
        return false
      })
      dropBox.addEventListener('drop', (ev: any) => {
        ev.preventDefault()
        if (ev.target.childNodes.length === 0) {
          const sourceId = ev.dataTransfer.getData('text/plain')
          const dragItem = document.getElementById(sourceId) as HTMLDivElement
          dragItem.style.position = 'static'
          ev.target.appendChild(dragItem)
          setTimeout(() => {
            this.verify(() => {
              alert('拼图成功')
            }, () => {
              const dropBoxs = document.querySelectorAll('.dropBox')
              for (let index = 0; index < 9; index++) {
                const dragItem = dropBoxs[index].childNodes[0]
                if (!dragItem) return null
              }
              return alert('OMG，你输了 ')
            })
          }, 300)
        } else {
          return false
        }
      })
    })
  }
}
</script>

<style scoped>
.pane{
    display: flex;
    justify-content: center;
    margin-top:20vh;
}
.dropContainer{
    display: flex;
    width: 350px;
    flex-wrap: wrap;
}
.dropBox{
    width: 100px;
    height: 100px;
    border: 1px #eee solid

}
.dragItem{
    width: 100px;
    height: 100px;
    background: red;
    position: fixed;
    left: 20vw;
    top: 50vh;
    color: #fff;
    font-size: 40px;
    font-weight: bolder;
    text-align: center;
    line-height: 100px;

}
</style>
